<template>
    <el-card class="card-bar">
        <div class="flex">
            <div class="blue-radius"></div>
            <h2 class="page-title">居民管理</h2>
        </div>
        <div
            style="display: flex;justify-content: space-between;height: 40px;align-items: center;overflow: hidden;margin: 20px 0;">
            <el-form label-width="80" :inline="true" :model="searchData" class="demo-form-inline"
                style="margin: 20px 0;--el-font-size-base:13px;--el-input-height:42px;--el-text-color-placeholder: #000;">
                <el-form-item label="签约状态">
                    <el-select v-model="searchData.state" clearable>
                        <el-option value="" label="请选择" />
                        <el-option value="1" label="签约中" />
                        <el-option value="2" label="签约生效中" />
                        <el-option value="3" label="待续约" />
                        <el-option value="0" label="待签约" />


                    </el-select>
                </el-form-item>
                <el-form-item label="签约机构">
                    <el-select v-model="searchData.organizationId" clearable>
                        <el-option value="" label="请选择" />
                        <el-option :label="item.name" :value="item._id" v-for="item in organization" />

                    </el-select>
                </el-form-item>
                <el-form-item label="民生团队">
                    <el-select v-model="searchData.teamId" clearable>
                        <el-option value="" label="请选择" />
                        <el-option :label="item.name" :value="item._id" v-for="item in team" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" style="height: 40px;" @click="onAddResident"
                    permission="新增居民档案">添加居民档案</el-button>
                <el-button type="primary" plain
                    style="--el-color-primary-light-9:transparent;height: 40px;">导出</el-button>
            </div>
        </div>
        <div
            style="display: flex;justify-content: space-between;height: 40px;align-items: center;overflow: hidden;margin: 20px 0;margin-bottom: 25px;">
            <el-form label-width="80" :inline="true" :model="searchData" class="demo-form-inline">
                <el-form-item label="服务包">
                    <el-select v-model="searchData.servicePackId" clearable>
                        <el-option value="" label="请选择" />
                        <el-option v-for="item in packData" :label="item.name" :key="item._id"
                            :value="item._id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择标签">
                    <el-select v-model="searchData.servicePack" clearable>
                        <el-option value="" label="请选择" />
                        <el-option v-for="item in tagData" :label="item.name" :key="item._id"
                            :value="item._id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input style="height: 30px;width: 376px;--el-input-height:40px">
                        <template #suffix>
                            <el-icon class="el-input__icon">
                                <search />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="menu-img">
                <img src="/src/assets/list1.png" alt="" class="list" @click="updateMenu" v-if="nowList == 'menu'"
                    style="margin-bottom: 2px;">
                <img src="/src/assets/list2.png" alt="" class="list" @click="updateMenu" v-if="nowList == 'list'">
                <img src="/src/assets/menu1.png" alt="" class="menu" @click="updateMenu" v-if="nowList == 'list'">
                <img src="/src/assets/menu2.png" alt="" class="menu" @click="updateMenu" v-if="nowList == 'menu'">

            </div>
        </div>

        <!-- 表单列表 -->
        <ResidentList :pageData="pageData" :searchData="searchData" v-model="total" v-if="nowList == 'list'">
        </ResidentList>
        <!-- 图表列表 -->
        <ResidentMenu :pageData="pageData" :searchData="searchData" v-model="total" v-if="nowList == 'menu'">
        </ResidentMenu>
        <!-- 分页 -->

        <div style="display: flex;justify-content: flex-end;margin-top: 15px;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[10, 20, 30, 50]" background layout="total, sizes, prev, pager, next, jumper"
                :total="total" />
        </div>
    </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { searchTeamsApi } from '../../api/teamManage';
import { searchOrganizationsApi } from '../../api/organizations';
import { findPackApi } from '../../api/servicePack';
import ResidentMenu from './residentForm/ResidentMenu.vue';
import ResidentList from './residentForm/ResidentList.vue';
import {
    Search,
} from '@element-plus/icons-vue'
import { findResidentInfoApi } from '../../api/resident';
import { findTagsApi } from '../../api/tags';
import { useRouter } from 'vue-router';
const router = useRouter()
const searchData = ref({
    state: '',
    organization: '',
    team: '',
    servicePack: '',
    tags: []
});

onMounted(() => {
    findResident()
    findTag()
    findOrganization()
    getTeam()
    findPack()
})

// 添加居民档案
function onAddResident() {
    router.push('/resident/add')
}

// 分页
const total = ref(1);
const pageData = ref({
    pageSize: 10,
    currentPage: 1
})



// 标签数据
const tagData = ref([])

function findTag() {
    findTagsApi()
        .then(res => {
            if (res.code == 200) {
                tagData.value = res.data.rows
            }
        })
}

// 居民数据
const residentData = ref([])

// 获取居民数据
function findResident() {
    findResidentInfoApi()
        .then(res => {
            if (res.code == 200) {
                residentData.value = res.data
                total.value = res.data.total
            }
        })
}

// 当前菜单形式
const nowList = ref('menu')

// 改变菜单形式
function updateMenu() {
    if (nowList.value == 'menu') {
        nowList.value = 'list'
    } else {
        nowList.value = 'menu'
    }
}

const packData = ref([])
function findPack() {
    findPackApi()
        .then(res => {
            if (res.code == 200) {
                packData.value = res.data.rows
            }
        })
}


// 前往详情页



// 机构
const organization = ref([])
const team = ref([])

// 查询机构
function findOrganization() {
    searchOrganizationsApi()
        .then(res => {
            if (res.code == 200) {
                organization.value = res.data.rows
            }
        })
}

// 获取团队
function getTeam() {
    searchTeamsApi()
        .then(res => {
            if (res.code == 200) {
                team.value = res.data.rows
            }
        })
}


</script>

<style scoped>
.class-bar {
    background-color: #fff;
}



.title-bar {
    height: 20px;
    display: flex;
    align-items: center;
    line-height: 20px;
}

.title-bar div {
    width: 6px;
    height: 20px;
    border-radius: 16px;
    margin-right: 15px;
    background-color: var(--el-color-primary);
}

.el-form-item--label-right .el-form-item__label {
    height: 40px;
    display: inline-block;
}

.menu-img {
    height: 40px;
    display: inline-block;
    display: flex;
    align-items: center;
}

.menu-img .list {
    height: 16px;
    width: 16px;
    cursor: pointer;
    margin-right: 12px;
}

.menu-img menu {
    height: 17px;
    width: 19px;
    cursor: pointer;
}

.title-bar span {
    color: var(--el-title-font-color);
    font-size: var(--el-title-font-size);
    font-weight: var(--el-title-font-weight);
}

.el-select {
    height: 40px;
    width: 200px;
    padding: 0;
    box-sizing: border-box;
}

.el-input {
    height: 40px !important;
}

.el-select__placeholder.is-transparent {
    font-size: 13px;
}

.page-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 550;
    color: #333333E5;
}

.blue-radius {
    border-width: 0px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-top: 4px;
    margin-right: 10px;
}
</style>